<template>
  <div>
    <div class="page_vue1" v-if="isbtnBox">
      <div class="nameTitle_box" @click="pageTitleClick">
        <svg-icon :icon-class="routerInfo.meta.icon" style="margin-top: 3px"></svg-icon>
        <span class="nameTitle" :title="props.name ? props.name : routerInfo.meta.title">{{ props.name ? props.name : routerInfo.meta.title }}</span>
      </div>

      <div class="btn_box">
        <div class="create_box" style="display: flex; align-items: center">
          <!-- 搜索 -->
          <el-button link @click="switchSearchInputClick">
            <img src="../../../assets/images/document/search.png" class="img_size" alt="" />
          </el-button>

          <!-- <el-button link @click="exportClick" :disabled="isExportDisabled">
            <img src="../../../assets/images/document/export.png" style="width: 21px; height: 22px; margin-right: 8px" alt="" />
            <!== <svg-icon icon-class="exports" style="color:#629bfa; height: 25px;" class="img_size" /> ==>
          </el-button> -->

          <!-- 上传 -->
          <!-- <el-button v-if="pageType != 'enterprise'" type="text" @click="getOpenUploadMenu">
            <img src="../../../assets/images/document/upload.png" class="img_size" alt="" />
          </el-button> -->
          <!-- <el-dropdown v-else trigger="click" @command="createCommand">
            <el-button type="text" :disabled="isAddDisabled">
              <img src="../../../assets/images/document/upload.png" class="img_size" alt="" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item class="create_row" command="file" :disabled="isAddDisabled">
                <svg-icon icon-class="uploadFile" style="color:#629bfa" />
                <span class="metaTitle">上传文件</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
          <!-- <files-or-folders-upload :pageType="pageType" :parentIdUpload="parentIdUpload"
            ref="filesOrFoldersUploadRefs" /> -->

          <el-dropdown trigger="click" @command="createCommand">
            <el-button link :disabled="isUplaodDisabled" @click="isUploadConfig">
              <img src="../../../assets/images/document/upload.png" class="img_size" alt="" />
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="fileDialog">
                  <div class="dropItem">
                    <el-icon>
                      <Files />
                    </el-icon>
                    <p>上传文件</p>
                  </div>
                </el-dropdown-item>
                <el-dropdown-item command="folderDialog">
                  <div class="dropItem">
                    <el-icon>
                      <Folder />
                    </el-icon>
                    <p>上传文件夹</p>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
            <!-- <el-dropdown-menu slot="dropdown" v-if="enterConfig != 'process'">
              <el-dropdown-item class="create_row" command="file" :disabled="isUplaodDisabled">
                <svg-icon icon-class="uploadFile" style="color: #629bfa" />
                <span class="metaTitle">上传文件</span>
              </el-dropdown-item>
              <el-dropdown-item class="create_row" command="folder">
                <svg-icon icon-class="floder" style="color: #f8c944" />
                <span class="metaTitle">上传文件夹</span>
              </el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu slot="dropdown" v-else>
              <el-dropdown-item class="create_row" command="fileProcess" :disabled="isUplaodDisabled">
                <svg-icon icon-class="uploadFile" style="color: #629bfa" />
                <span class="metaTitle">上传文件(流程)</span>
              </el-dropdown-item>
              <el-dropdown-item class="create_row" command="folderProcess">
                <svg-icon icon-class="floder" style="color: #f8c944" />
                <span class="metaTitle">上传文件夹(流程)</span>
              </el-dropdown-item>
            </el-dropdown-menu> -->
          </el-dropdown>
          <el-dropdown v-show="false" @command="createCommand" v-if="pageType != 'enterprise'">
            <el-button icon="el-icon-folder-opened" circle size="small" style="font-size: 8px; margin-right: 8px"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="fileDialog" @click="triggerFile">
                <div class="dropItem">
                  <i class="el-icon-files" type="primary"></i>
                  <p>上传文件</p>
                </div>
                <!-- <input style="display: none;" type="file" ref="fileInput" /> -->
              </el-dropdown-item>
              <el-dropdown-item command="folderDialog" @click="triggerFolder">
                <div class="dropItem">
                  <i class="el-icon-folder-opened" type="primary"></i>
                  <p>上传文件夹</p>
                </div>
                <!-- <input style="display: none;" type="file" ref="folder" webkitdirectory directory multiple /> -->
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-dropdown>
            <el-button icon="el-icon-folder-opened" circle size="mini"
              style="font-size: 8px;margin-right: 8px;"></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div class="dropItem" @click="handleFileUploadClick">
                  <i class="el-icon-files" type="primary"></i>
                  <p>上传文件</p>
                </div>
                <input style="display: none;" type="file" ref="fileInput" @change="handleFileChange" />
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="dropItem" @click="handleFloderUploadClick">
                  <i class="el-icon-folder-opened" type="primary"></i>
                  <p>上传文件夹</p>
                </div>
                <input style="display: none;" type="file" ref="folder" webkitdirectory directory multiple />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>

        <!-- 新建 -->
        <div class="create_box">
          <el-dropdown trigger="click">
            <el-button link :disabled="isAddDisabled">
              <img src="../../../assets/images/document/add.png" class="img_size" alt="" />
            </el-button>
            <template #dropdown="dropdown">
              <el-dropdown-menu>
                <div class="dropdown_box">
                  <div v-if="pageType != 'enterprise'">
                    <div class="head_title">Office套件</div>
                    <div class="createMenu_box">
                      <div class="item_box" @click="createCommand('word')">
                        <svg-icon icon-class="Word" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">Word</div>
                          <div class="title_sub2">专业的文档编辑工具</div>
                        </div>
                      </div>
                      <div class="item_box" @click="createCommand('excel')">
                        <svg-icon icon-class="Excel" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">Excel</div>
                          <div class="title_sub2">在线数据处理、分析与计算</div>
                        </div>
                      </div>
                      <div class="item_box" @click="createCommand('ppt')">
                        <svg-icon icon-class="PPT" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">PPT</div>
                          <div class="title_sub2">在线制作演示文稿</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="head_title">其他功能</div>
                    <div class="createMenu_box">
                      <div class="item_box" @click="createCommand('newFolder')">
                        <svg-icon icon-class="file-close" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">新建文件夹</div>
                          <div class="title_sub2">多个文档归类</div>
                        </div>
                      </div>
                      <!-- <div v-if="pageType != 'enterprise'" class="item_box" @click="createCommand('formDocument')">
                        <svg-icon icon-class="biaodan3" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">新建表单</div>
                          <div class="title_sub2">在线制作表单文件</div>
                        </div>
                      </div> -->
                      <div v-if="pageType == 'team'" class="item_box" @click="createCommand('project')">
                        <svg-icon icon-class="icon_app_project_" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">新建项目文件</div>
                          <div class="title_sub2">开始全新的项目计划</div>
                        </div>
                      </div>

                      <div v-if="pageType != 'enterprise'" class="item_box" @click="createCommand('center')">
                        <svg-icon icon-class="moban" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">模版中心</div>
                          <div class="title_sub2">多种多样文档供你选择</div>
                        </div>
                      </div>
                      <div v-if="pageType == 'team'" class="item_box" @click="createCommand('teamTemplate')">
                        <svg-icon icon-class="xiangmu" class="title_icon"></svg-icon>
                        <div>
                          <div class="title_sub">团队模板</div>
                          <div class="title_sub2"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- <el-dropdown-item class="create_row" command="newFolder">
                <svg-icon icon-class="add"></svg-icon>
                <span class="metaTitle">新建文件夹</span>
              </el-dropdown-item>

              <el-dropdown-item
                class="create_row create_row_bottom"
                command="word"
                v-if="pageType != 'enterprise'"
              >
                <svg-icon icon-class="Word"></svg-icon>
                <span class="metaTitle">新建word</span>
              </el-dropdown-item>

              <el-dropdown-item
                class="create_row"
                command="excel"
                v-if="pageType != 'enterprise'"
              >
                <svg-icon icon-class="Excel"></svg-icon>
                <span class="metaTitle">新建excel</span>
              </el-dropdown-item>
              <el-dropdown-item
                class="create_row"
                command="ppt"
                v-if="pageType != 'enterprise'"
              >
                <svg-icon icon-class="PPT"></svg-icon>
                <span class="metaTitle">新建ppt</span>
              </el-dropdown-item>

              <el-dropdown-item
                class="create_row"
                command="formDocument"
                v-if="pageType != 'enterprise'"
              >
                <svg-icon icon-class="txt"></svg-icon>
                <span class="metaTitle">新建表单</span>
              </el-dropdown-item>
              <el-dropdown-item
                class="create_row"
                command="project"
                v-if="pageType == 'team'"
              >
                <svg-icon icon-class="icon_app_project_"></svg-icon>
                <span class="metaTitle">创建项目</span>
              </el-dropdown-item>
              <el-dropdown-item
                class="create_row"
                command="center"
                v-if="pageType != 'enterprise'"
              >
                <img
                  style="width: 18px; height: 18px; margin-right: 5px"
                  src="../../../assets/images/template/qu2.png"
                  alt=""
                />
                <span class="metaTitle">模版中心</span>
              </el-dropdown-item> -->
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <div class="page_vue1" v-else>
      <div class="slotClass">
        <!-- 搜索 -->
        <div class="searchBox" v-scrollLoad="querySearchLoad">
          <el-autocomplete
            ref="autocompleteRefs"
            v-model="searchInput"
            :fetch-suggestions="querySearch"
            placeholder="请输入搜索内容"
            class="searchInput"
            @select="handleSelectSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>

            <!-- <template #default="{ item }">
              <div class="content_box">
                <div class="searchInput_name">
                  <svg-icon :icon-class="selectSvgIcons(item)" id="icons" style=""></svg-icon>
                </div>

                <div class="superiorsPath">
                  <div class="file-txt" v-html="stripHtml(item.title)"></div>
                  <div class="txt" v-if="item.docContent" v-html="stripHtml(item.docContent)"></div>
                </div>
              </div>
            </template> -->

            <template #default="{ item }">
              <div class="content_box">
                <div class="searchInput_name">
                  <svg-icon :icon-class="selectSvgIcons(item)" style="font-size: 20px; vertical-align: middle; margin-right: 6px"></svg-icon>
                  <div>{{ item.realName }}{{ item.suffix ? `.${item.suffix}` : '' }}</div>
                </div>
                <div v-if="item.docContent" class="search_docContent" v-html="esSearchFunc(item.docContent)"></div>
                <div class="superiorsPath">
                  <span>路径:{{ item.superiorsPath }}</span>
                </div>
              </div>
            </template>
          </el-autocomplete>
        </div>
      </div>
      <el-button link @click="closeClick">取消</el-button>
    </div>
    <!-- <UploadProgressPopup :show="isUploading" :percentage="uploadProgress" :progressText="uploadProgressText"
      :iconName="iconName" @closeBtn="closeClick" :fileList="fileList" /> -->

    <!-- <ExportInfo ref="ExportInfoRefs" :pageType="pageType" /> -->
  </div>
</template>

<script setup lang="ts">
import { ApiPersearchInfo, ApiPerselectPersonalTreePage, ApiPerGetParentTreeNodeAll } from '@/api/personDoc/personDocApi';
import { apiSearchFilesInfo } from '@/api/enterpriseDoc/enterpriseDoorApi';
const { proxy } = getCurrentInstance() as any;
const route = useRoute();

const isbtnBox = ref(true);
const routerInfo: any = ref({});
/**搜索----start */
const searchInput = ref('');
const searchStr = ref({
  page: 0,
  pageCount: null,
  list: []
});
const selectedItem = ref(null);
const searchLoading = ref(false); //用于搜索的滚动加载
const isSearchMore = ref(true);
/**搜索----end */
const enterConfig = ref('');
const autocompleteRefs = ref();
const suggestions = ref([]); // 用来存储 suggestions 数据
const filesOrFoldersUploadRefs = ref();

const props = defineProps({
  pageType: {
    //enterprise:企业,team:团队,self:个人
    type: String,
    default: ''
  },
  parentIdUpload: {
    default: ''
  },
  parentId: {
    //父级id 目前只用于企业判断是否是根目录
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  rowData: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits(['pageTitleClick', 'createUploadBtnClick', 'handleSelectSearch', 'trigger-file', 'trigger-folder']);
const pageType = ref(props.pageType);
const parentIdUpload = ref(props.parentIdUpload);
const parentId = ref(props.parentId);

/**计算属性----------------start */

const isUplaodDisabled = computed(() => {
  return false;
  // if (this.pageType == "enterprise") {
  //       //企业
  //       if (this.parentId == 1) {
  //         return true;
  //       }
  //       if (this.enterConfig == "process") {
  //         return false;
  //       }
  //       return !this.$yuUtils.documentsPermissionFunc(["add", "addFolder"], this.$store.state.enterpriseRole.enterpriseMyParentRoleList);
  //     } else if (this.pageType == "team") {
  //       //团队
  //       return !this.$yuUtils.documentsPermissionFunc(["add"], this.$store.state.teamRole.myParentRoleList);
  //     } else {
  //       //个人
  //       return false;
  //     }
});
const isExportDisabled = computed(() => {
  return false;

  // if (this.pageType == "enterprise") {
  //       if (
  //         this.user.roles.indexOf(this.user.roles.find((item) => item.id == 1)) != -1 ||
  //         this.user.roles.indexOf(this.user.roles.find((item) => item.id != 5)) == -1
  //       ) {
  //         return false;
  //       } else {
  //         return true;
  //       }
  //     } else {
  //       return false;
  //     }
});

const isAddDisabled = computed(() => {
  return false;

  // if (this.pageType == "enterprise") {
  //       //企业
  //       // console.log(!this.$yuUtils.documentsPermissionFunc(["add"], this.$store.state.enterpriseRole.enterpriseMyParentRoleList),1);
  //       // console.log( this.$store.state.enterpriseRole.enterpriseMyParentRoleList,2);
  //       return !this.$yuUtils.documentsPermissionFunc(["add"], this.$store.state.enterpriseRole.enterpriseMyParentRoleList);
  //     } else if (this.pageType == "team") {
  //       //团队
  //       return !this.$yuUtils.documentsPermissionFunc(["add"], this.$store.state.teamRole.myParentRoleList);
  //     } else {
  //       //个人
  //       return false;
  //     }
});
/**计算属性----------------end */
/**监听----------------start */
// 监听路由变化
watch(
  () => route,
  (to, from) => {
    routerInfo.value = to;
  },
  { deep: true, immediate: true }
);
// 监听 parentId 变化
watch(parentId, (val, oldVal) => {
  parentId.value = val;
});
/**监听----------------end */

// 处理 HTML 内容，先保留 <em> 标签内容背景色，再去除其他标签
const stripHtml = (html) => {
  // 创建一个临时容器
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;

  // 找到所有 <em> 标签并设置其样式
  const emTags = tempDiv.getElementsByTagName('em');
  Array.from(emTags).forEach((em) => {
    // 用 span 替代 <em> 标签并设置背景色
    const span = document.createElement('span');
    span.style.backgroundColor = '#eff4ff';
    span.style.padding = '2px';
    span.style.borderRadius = '4px';
    span.style.color = '#6698ff';
    // span.style.fontWeight = 'bold';
    span.innerHTML = em.innerHTML; // 将 <em> 标签中的内容放入 <span> 中
    em.replaceWith(span); // 替换 <em> 标签为 <span>
  });

  // 返回处理过的 HTML 内容（将其他标签移除，只保留纯文本和带样式的 <span>）
  return tempDiv.innerHTML;
};

// const stripHtml = (html) => {
//   const tempDiv = document.createElement('div');
//   tempDiv.innerHTML = html;
//   return tempDiv.innerText || tempDiv.textContent || '';
// };
onMounted(() => {
  // console.log(props.pageType, '9999999999999999');
});
//回到根目录
const pageTitleClick = () => {
  emit('pageTitleClick');
};
const createCommand = (command: any) => {
  emit('createUploadBtnClick', command);
};
const selectSvgIcons = (v: any) => {
  return proxy.$yuUtils.selectSvgIcon(v);
};
//  切换搜索
const switchSearchInputClick = () => {
  isbtnBox.value = false;
};

//取消
const closeClick = () => {
  isbtnBox.value = true;
  searchInput.value = '';
};

//搜索
// const querySearch = (queryString, cb) => {
//   if (searchInput.value == '' && searchInput.value != undefined) {
//     cb([]);
//     return;
//   }
//   searchStr.value.page = 0;
//   //个人
//   ApiPersearchInfo({
//     title: searchInput.value,
//     moduleType: props.pageType,
//     content: searchInput.value,
//     page: searchStr.value.page,
//     size: 10
//   }).then((res: any) => {
//     console.log(res, '搜索的值999999999999999');

//     searchStr.value.page += 1;
//     searchStr.value.pageCount = res.length;
//     searchStr.value.list = res;
//     if (res.length == 0) {
//       ElMessage.warning('未匹配到数据,请重新输入!');
//     }
//     // 调用 callback 返回建议列表的数据
//     cb(res);
//   });
// };

const querySearch = (queryString, cb) => {
  if (searchInput.value == '' && searchInput.value != undefined) {
    cb([]);
    return;
  }
  searchStr.value.page = 0;
  let oParam = {
    type: props.pageType,
    size: 10,
    realName: searchInput.value,
    page: searchStr.value.page
  };
  if (props.pageType == 'enterprise') {
    apiSearchFilesInfo({
      page: searchStr.value.page,
      size: 10,
      type: 'enterprise',
      fileName: searchInput.value,
      libraryId: props.rowData.id
    }).then((res: any) => {
      searchStr.value.page += 1;
      searchStr.value.pageCount = res.data.pageCount;
      searchStr.value.list = res.data.rows;
      if (res.data.rows.length == 0) {
        proxy.$message.warning('未匹配到数据,请重新输入!');
      }
      // 调用 callback 返回建议列表的数据
      cb(res.data.rows);
    });
  } else {
    ApiPerselectPersonalTreePage(oParam).then((res: any) => {
      searchStr.value.page += 1;
      searchStr.value.pageCount = res.length;
      searchStr.value.list = res.data.children;
      if (res.length == 0) {
        ElMessage.warning('未匹配到数据,请重新输入!');
      }
      // 调用 callback 返回建议列表的数据
      cb(res.data.children);
    });
  }
};

// 滚动加载
// const querySearchLoad = () => {
//   if (searchStr.value.page > searchStr.value.pageCount) {
//     //   this.divider = true;
//     return;
//   }

//   if (!searchLoading.value) {
//     searchLoading.value = true;

//     ApiPersearchInfo({
//       title: searchInput.value,
//       moduleType: props.pageType,
//       content: searchInput.value,
//       page: searchStr.value.page,
//       size: 10
//     }).then((res: any) => {
//       searchLoading.value = false;
//       searchStr.value.page += 1;
//       autocompleteRefs.value.$data.suggestions = autocompleteRefs.value.$data.suggestions.concat(res);
//       searchStr.value.pageCount = res.length;
//     });
//   }
// };

const querySearchLoad = () => {
  if (searchStr.value.page > searchStr.value.pageCount) {
    //   this.divider = true;
    return;
  }

  if (!searchLoading.value) {
    searchLoading.value = true;

    if (props.pageType == 'enterprise') {
    } else {
      ApiPerselectPersonalTreePage({
        type: props.pageType,
        size: 10,
        realName: searchInput.value,
        page: searchStr.value.page
      }).then((res: any) => {
        const filteredResults = res.data.children.filter((item: any) => item.type !== 'folder');
        searchLoading.value = false;
        searchStr.value.page += 1;
        autocompleteRefs.value.$data.suggestions = autocompleteRefs.value.$data.suggestions.concat(filteredResults);
        searchStr.value.pageCount = res.data.children;
      });
    }
  }
};
// es搜索出来的内容高亮方法
const esSearchFunc = (str: any) => {
  // 创建一个新的HTML元素，用来解析docContent
  let parser = new DOMParser();
  let doc = parser.parseFromString(str, 'text/html');
  // 找到所有 <em> 标签
  let emTags = doc.getElementsByTagName('em');

  // 遍历 <em> 标签并添加样式
  for (let i = 0; i < emTags.length; i++) {
    emTags[i].style.color = '#36a3f7'; // 改变文本颜色
    emTags[i].style.fontWeight = 'bold'; // 设置文字加粗
  }
  return doc.body.innerHTML;
};

//单击了某一行
const handleSelectSearch = (item: any) => {
  emit('handleSelectSearch', item);
  autocompleteRefs.value.activated = false;
};

// const handleSelectSearch = async (row: any) => {
//   let params = {
//     id: row.id,
//     fileType: 0
//   };

//   const res = await ApiPerGetParentTreeNodeAll(params);
//   let expandedKeys = res.data.map((item: any) => {
//       let obj = {
//         id: parseInt(item.id),
//         label: item.realName
//       };
//       return obj;
//     });
//     sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys));
//     proxy.$router.replace({ path: '/newUi/networkDisk/doc' });

//   // sessionStorage.setItem('expandedKeys', JSON.stringify(expandedKeys));

//   // proxy.$router.push({ path: '/newUi/networkDisk/doc' });
//   // console.log('单击搜索');
// };

// 个人和企业 文件/文件夹上传-----html被注释了  是否需要删除由"易家富"决定
const getOpenUploadMenu = () => {
  filesOrFoldersUploadRefs.value.isShowMenuUpload = !filesOrFoldersUploadRefs.value.isShowMenuUpload;
};

// 文件进度弹窗
const triggerFile = () => {
  emit('trigger-file');
};
const triggerFolder = () => {
  emit('trigger-folder');
};
// 获取上传文件是否为权限还是流程
const isUploadConfig = () => {
  // if (this.pageType == "enterprise") {
  //   let res = await enterpriseApi.apiEnterpriseConfig({ code: "ENTERPRISE_UPLOAD_PROCESS_CONFIG" });
  //   if (res.success) {
  //     this.enterConfig = res.obj.value;
  //   }
  // }
};
// 导出弹框
const exportClick = () => {
  // this.$refs.ExportInfoRefs.OpenDialog();
};
</script>

<style scoped lang="scss">
/* 为 <em> 标签的内容添加背景色 */
.highlight-em {
  background-color: #fdeaab;
}
#icons {
  // border: 1px solid red;
  width: 35px;
  height: 35px;
  font-size: 20px;
  vertical-align: middle;
  margin-right: 6px;
}
.superiorsPath {
  // width: 550px !important;

  .file-txt {
    font-weight: 700;
    font-size: 14px;
    color: #1f2329;
    letter-spacing: 1.5px;
  }
  .txt {
    font-size: 12px;
    color: #646a73;
    letter-spacing: 1.5px;
    overflow: hidden !important;
    /*内容超出后隐藏*/
    text-overflow: ellipsis !important;
    /*超出内容显示为省略号*/
    white-space: nowrap !important;
    /*文本不进行换行*/
  }
}
// :deep(.el-autocomplete-suggestion) {
//   width: 550px !important;
// }

// :deep(.el-autocomplete__popper) {
//   width: 550px !important;
// }

.page_vue1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 6px;
  border-bottom: 1px solid #eee;
}

.nameTitle_box {
  cursor: pointer;
  color: #333;
  font-size: 17px;
  display: flex;
  flex-wrap: wrap;
  .nameTitle {
    display: inline-block;
    font-weight: 600;
    margin-left: 6px;
    max-width: 80px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &:hover {
    color: #2674f9;
  }
}

.btn_box {
  display: flex;
  align-items: center;
}

.img_size {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.create_row {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 16px;
  width: 200px;
  padding: 6px 16px !important;

  span {
    font-size: 14px;
    margin-left: 8px;
    color: #333 !important;
  }

  &:hover {
    background-color: #f5f5f5 !important;
    color: #999;
  }
}

.create_row_bottom {
  border-top: 1px solid #f5f5f5;
}

.slotClass {
  width: 100%;
}

/**搜索---start */
.searchBox {
  width: 100%;

  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    border: none !important;
  }

  :deep(.el-input__inner) {
    box-shadow: none !important;
    border: none !important;
  }
}

.searchInput {
  // width: 500px;
  border: none;
  width: 100%;
}

.searchInput_name {
  width: 100%;
  display: flex;
  align-items: center;

  div {
    // width: 10px;
    overflow: hidden;
    /*内容超出后隐藏*/
    text-overflow: ellipsis;
    /*超出内容显示为省略号*/
    white-space: nowrap;
    /*文本不进行换行*/
  }
}

.content_box {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
}

.superiorsPath {
  font-size: 12px;
  color: #d6d6d6;
  line-height: 22px;
  // text-align: right;
  overflow: hidden;
  /*内容超出后隐藏*/
  text-overflow: ellipsis;
  /*超出内容显示为省略号*/
  white-space: nowrap;
  /*文本不进行换行*/
}

.search_docContent {
  font-size: 12px;
  color: #939292;
  line-height: 22px;
}

/**搜索---end */
/**新建菜单---start */
.dropdown_box {
  width: 420px;
  padding: 16px;

  .head_title {
    font-size: 14px;
    color: #3a3a3a;
    margin-bottom: 12px;
  }

  .createMenu_box {
    display: flex;
    flex-wrap: wrap;
  }

  .item_box {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 6px;
    cursor: pointer;
    width: 190px;
    border-radius: 6px;
    transition: all 0.3s;

    &:hover {
      background-color: #f5f5f5;
      transition: all 0.2s;
    }

    .title_icon {
      font-size: 34px;
      margin-right: 4px;
    }

    .title_sub {
      font-size: 14px;
      color: #3a3a3a;
      margin-bottom: 2px;
    }

    .title_sub2 {
      font-size: 11px;
      color: #c0c0c0;
    }
  }
}

// dropItem
.dropItem {
  display: flex;
  align-items: center;

  i {
    font-size: 20px;
    margin-right: 10px;
    color: skyblue;
  }
}

/**新建菜单---end */
</style>
